<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            background-color: antiquewhite;
        }

        .color {
            color: chartreuse;
        }
    </style>
</head>

<body>
    <section id="app">
        <my-com></my-com>
        <my-com2 :username="username"></my-com2>
        <h2 v-red="color" :class="bgc">{{title+"cat"}}</h2>
        <div>{{title}}</div>
        <div>{{n}}</div>
        <input type="text" v-model="username">
        <div>{{username}}</div>
        <div v-html="html+text"></div>
        <div v-text="text+html"></div>
        <ul>
            <li v-for="(item,index) in arr" :key="index" :class="index%2==0?bgc[0]:bgc[1]">{{item}}</li>
        </ul>
        <form action="">
            <input type="text" v-model="username">
            <input type="password" v-model="password">
            <div>
                <input type="checkbox" v-model="hobby" value="snacks">零食
                <input type="checkbox" v-model="hobby" value="tea">茶
                <input type="checkbox" v-model="hobby" value="game">游戏
            </div>
            <select name="" id="" v-model="city" @change="callCity">
                <option value="gz">广州</option>
                <option value="北京">北京</option>
            </select>
            <div>{{num|filterThousands}}</div>
            <div>{{gen}}</div>
            <input type="text" v-model="gen">
        </form>
        <section>
            <mycompontent :number="num">
                <div slot="header">我是头部</div>
                <div @click="callCity">我是插槽内容</div>
            </mycompontent>
        </section>
    </section>
    <script src="./lib/vue.js"></script>
    <script>
        //响应式框架
        //绑定数据，无dom操作，通过更新数据，自动更新所管理的区域数据，响应数据变化，展示出来
        //双向绑定数据，model层即data数据，通过vm实例处理，展示到view层，在这个阶段vm层应该收集到DOM对象并保存起来，建立change事件监听，以便后续从view层收集数据。
        //view层数据发生变化，vm层再收集数据，修改model层数据，model层数据发生变化，抛发给vm实例，去控制view层的数据展示。
        //(一般用户输入为input框，input框可以监听change事件，用户输入时触发change事件，change事件内vm收集信息，再根据当前DOM对象查到当前对象绑定了哪些数据，vm实例根据这个更改model数据，model层数据改变，设置model层的数据会触发代理，代理内操作绑定这个数据的DOM对象，达到用户修改一个值，其余地方也随之发生变化)
        let EventBus = new Vue();
        Vue.directive("red",function(ele,prams){
            console.log(ele,prams,"red");
            ele.style.color=prams.value;
        });
        Vue.component("mycompontent", {
            template: `
                <div>
                    <h2>组件</h2>
                    <div>{{name}}</div>
                    <div>{{age}}</div>
                    <button @click="callAdd">+</button>
                    <slot name="header"></slot>
                    <slot>默认插槽</slot>
                </div>
            `,
            props: {
                number: {
                    default: 12,
                    type: Number
                }
            },
            data() {
                return {
                    name: "白猫",
                    age: 1
                }
            },
            methods: {
                callAdd() {
                    console.log("xs", this.number);
                    this.age++;
                }
            }
        })
        let vm = new Vue({
            el: "#app",
            components: {
                "my-com": {
                    template: `<h1 style="user-select:none;" @click="handleCall">{{title}}</h1>`,
                    data() {
                        return {
                            title: "局部组件",
                            dataAll: {}
                        }
                    },
                    methods: {
                        handleCall() {
                            this.title += "."
                        }
                    },
                    beforeCreate() {
                        EventBus.$on("getMsg", (data) => {
                            this.title = data;
                        });
                    }
                },
                "my-com2": {
                    template: `<h1 @click="callMsg">{{msg}}</h1>`,
                    props: {
                        username: {
                            type: String,
                            default: "cc"
                        }
                    },
                    data() {
                        return {
                            msg: "12315",
                            dataAll: {}
                        }
                    },
                    methods: {
                        callMsg() {
                            console.log(this.username);
                            EventBus.$emit("getMsg", this.msg);
                        }
                    }
                }
            },
            data: {
                color:"red",
                title: "我是vue",
                n: 21,
                username: "cat",
                password: "",
                hobby: [],
                html: `<a href="#">首页</a>`,
                text: "文本",
                arr: [1, 2, 3, 4, 1, 2, 3, 4, 5, 3, 2, 1, 3, 2, 3, 4],
                bgc: ["bg", "color"],
                city: "",
                num: 123151561615161,
                obj: {
                    name: "cat",
                    age: 1
                },
                userInfo: {
                    name: "白猫"
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            },
            computed: {
                //计算属性，值变化时，执行一次，多次使用
                gen: {
                    get() {
                        return this.hobby;
                    },
                    set(newval) {
                        console.log(newval);
                        this.obj.name = newval;
                    }
                }
            },
            watch: {
                //监听
                gen(newValue, oldValue) {
                    console.log(newValue, oldValue);
                },
                ["obj.name"](newval, oldval) {
                    console.log(newval, "ol");
                },
                userInfo: {
                    handler(newVal) {
                        console.log(newVal, "watch");
                    },
                    deep: true,
                    immediate: true
                }
            },
            //准备vm对象的实例化
            beforeCreate() {
                console.log("beforeCreate");
                this.$nextTick(() => {
                    console.log("tick");
                })
            },
            //vm对象实例化完成，里面的各种属性定义完成，但还没有进行对模版的获取和编译处理
            created() {
                console.log("created");
            },
            //获取管理区域的模版，innerHTML,获取完成后调用该函数
            beforeMount() {
                console.log("beforeMount");
            },
            //将模版处理完成后，完成数据的替换，dom节点的收集绑定后，调用该函数
            mounted() {
                console.log("mounted");
            },
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            updated() {
                console.log("updated");
            },
            beforeDestroy() {
                console.log("beforeDestroy");
            },
            destroyed() {
                console.log("destroyed");
            },
            methods: {
                callCity(e) {
                    console.log(this.city);
                    console.log(handleCallCat(20));
                },
            },
            filters: {
                filterThousands(value, pram) {
                    return value.toString().replace(new RegExp(`\\B(?=(\\d{3})+(?!\\d))`, "g"), ",");
                }
            }
        });
        function handleCallCat(val = 0) {
            return val * 20;
        };
        window.onload = function () {
            console.log("onload");
        }
        console.log(vm);
        vm.title = "白猫";
        console.log(Vue);
        // vm.$destroy();
    </script>
</body>

</html>